<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath%>css/weui.css">
<link rel="stylesheet" href="<%=basePath%>css/example.css">
<title>Insert title here</title>
</head>
<body style="background-color: #179B16;">
	<div class="weui-toptips weui-toptips_warn js_tooltips" style="display: none;" id="errorTips">回答错误</div>
	<br>
	<h2 style="text-align: center; color: #FFFFFF">单人答题</h2>

	<div class="page__bd">
		<c:forEach items="${questionList }" var="question" varStatus="varStatus">
			<div class="weui-cells__title" style="color: #FFFFFF;">题目类型</div>
			<div class="weui-cells" style="background-color: #9ED99D;">
				<div class="weui-cell weui-cell_select weui-cell_select-after">
					<div class="weui-cell__bd">
						<select class="weui-select" id="typeCode" id="typeCode" name="typeCode" disabled="disabled">
							<option value="">请选择题目类型</option>
							<c:forEach items="${typeList }" var="type" varStatus="varStatus">
								<option value="${type.typeCode }" <c:if test="${question.typeCode eq type.typeCode}">selected="selected"</c:if>>${type.typeName }</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>

			<div class="weui-cells__title" style="color: #FFFFFF;">题目内容</div>
			<div class="weui-cells weui-cells_form"
				style="background-color: #9ED99D;">
				<div class="weui-cell">
					<div class="weui-cell__bd">${question.questionContent }</div>
				</div>
			</div>

			<div class="weui-cells__title" style="color: #FFFFFF;">请选择正确的选项</div>
			<div class="weui-cells weui-cells_radio" style="background-color: #9ED99D;">

				<c:forEach items="${question.answerList }" var="answer" varStatus="varStatus">
					<label class="weui-cell weui-check__label"
						for="x1${varStatus.count }">
						<div class="weui-cell__bd">
							<p>${answer.answer }</p>
						</div>
						<div class="weui-cell__ft">
							<input type="radio" class="weui-check" name="radio1" id="x1${varStatus.count }" onclick="checkAnswer('x1${varStatus.count }','${question.answer}','${answer.id}');">
							<span class="weui-icon-checked"></span>
						</div>
					</label>
				</c:forEach>

			</div>
		</c:forEach>

		<div class="weui-btn-area">
			<a class="weui-btn weui-btn_warn" href="javascript:;" onclick="skip('${rightNum }');">跳过</a>
		</div>

	</div>

	<div class="weui-footer">
		<p class="weui-footer__links">
			<a href="<%=basePath%>index.do" class="weui-footer__link">realQuestion</a>
		</p>
		<p class="weui-footer__text">Copyright © 2018 question.realjinge.com</p>
	</div>

	<div id="toastId" style="display: none;">
		<div class="weui-mask_transparent"></div>
		<div class="weui-toast">
			<i class="weui-icon-success-no-circle weui-icon_toast"></i>
			<p class="weui-toast__content">回答正确</p>
		</div>
	</div>
</body>

<script type="text/javascript">
	function countChar(textareaId, spanId) {
		document.getElementById(spanId).innerHTML = document.getElementById(textareaId).value.length;
	}
	
	function checkAnswer(id, answer, answerId) {
		if (answer == answerId) {
			document.getElementById("toastId").style.display = "inline";
			setTimeout(function() {
				document.getElementById("toastId").style.display = "none";
				var rightNum = '${rightNum }';
				if (rightNum == '') {
					rightNum = 0;
				}
				var count = 1 + parseInt(rightNum);
				skip(count);
			}, 1000);
		} else {
			showErrorTips();
			setTimeout(function() {
				var rightNum = '${rightNum }';
				if (rightNum == '') {
					rightNum = 0;
				}
				skip(rightNum);
			}, 1000);
		}
	}
	
	function skip(count) {
		var startNum = '${startNum }';
		if (startNum == '') {
			startNum = 0;
		}
		if (count == '') {
			count = 0;
		}
		var skip = 1 + parseInt(startNum);
		window.location.href="<%=basePath%>question/singleAnswer.do?token=${token }&startNum=" + skip + "&rightNum=" + count;
	}

	function showErrorTips() {
		document.getElementById("errorTips").style.display = "inline";
		setTimeout(function() {
			document.getElementById("errorTips").style.display = "none";
		}, 1500);
	}
</script>

</html>